<div class="col-12">
  <div class="custom-card bg-charcoal-surface1">
    <div class="custom-card-body p-4">
      <h2 class="mb-4"><i class="bi bi-gear-fill me-2"></i> Search settings</h2>
      <!-- The first row represents Category, Ratio, Filter, and Order -->
      <div class="row">
        <!-- Category: Always first on both large and small screens -->
        <div class="col-lg-7 mb-5 order-1 order-lg-1">
          <h3><i class="bi bi-grid-fill me-2"></i>Category</h3>
          {{- Category := isset(.Queries.category) ? .Queries.category : "artworks" }}
          {{- URL := unfinishedQuery(.QueriesC, "category") }}
          {{- path := slice("artworks", "illustrations", "manga") }}
          {{- name := slice("Artworks", "Illustrations", "Manga") }}
          {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveCategory) }}
        </div>

        <!-- Ratio: Second in small screens, but third in large screens -->
        <div class="col-lg-7 mb-5 order-2 order-lg-3">
          <h3><i class="bi bi-aspect-ratio-fill me-2"></i>Ratio</h3>
          {{- Ratio := isset(.Queries.ratio) ? .Queries.ratio : "" }}
          {{- URL := unfinishedQuery(.QueriesC, "ratio") }}
          {{- path := slice("", "-0.5", "0", "0.5") }}
          {{- name := slice("All", "Portrait", "Square", "Landscape") }}
          {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveRatio) }}
        </div>

        <!-- Filter: Third in small screens, but second in large screens -->
        <div class="col-lg-5 mb-5 order-3 order-lg-2">
          <h3><i class="bi bi-funnel-fill me-2"></i>Filter</h3>
          {{- Mode := isset(.Queries.mode) ? .Queries.mode : "safe" }}
          {{- URL := unfinishedQuery(.QueriesC, "mode") }}
          {{- path := slice("all", "safe", "r18") }}
          {{- name := slice("All", "Safe", "R-18") }}
          {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveMode) }}
        </div>

        <!-- Order: Fourth in both large and small screens -->
        <div class="col-lg-5 mb-5 order-4 order-lg-4">
          <h3><i class="bi bi-sort-down me-2"></i>Order</h3>
          {{- Order := isset(.Queries.order) ? .Queries.order : "date_d" }}
          {{- URL := unfinishedQuery(.QueriesC, "order") }}
          {{- path := slice("date_d", "date") }}
          {{- name := slice("Newest", "Oldest") }}
          {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveOrder) }}
        </div>
      </div>

      <!-- The second row represents Search Mode which is always last -->
      <div class="row">
        <!-- Search Mode: Always last on both large and small screens -->
        <div class="col-lg-12 mb-5 order-5 order-lg-5">
          <h3><i class="bi bi-search me-2"></i>Search mode</h3>
          {{- SearchMode := isset(.Queries.smode) ? .Queries.smode : "" }}
          {{- URL := unfinishedQuery(.QueriesC, "smode") }}
          {{- path := slice("", "s_tag_full", "s_tag", "s_tc") }}
          {{- name := slice("None", "Exact (tags)", "Partial (tags)", "Title/Caption") }}
          {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveSearchMode) }}
        </div>
      </div>

      <!-- Advanced settings -->
      <div class="accordion" id="advancedSettings">
        <div class="accordion-item">
          <!-- Refactor this (merge with JavaScript version if possible) -->
          <div class="accordion-header rounded-2" id="headingAdvanced">
            <label for="noscript-accordion" class="accordion-button bg-charcoal-surface2 text-body collapsed" type="button">
              <h3 class="mb-0"><i class="bi bi-gear-fill me-2"></i>Advanced settings</h3>
            </label>
          </div>
          <input type="checkbox" class="noscript-accordion d-none" id="noscript-accordion" />
          <div id="collapseAdvanced" class="accordion-collapse collapse" aria-labelledby="headingAdvanced" data-bs-parent="#advancedSettings">
            <div class="accordion-body bg-charcoal-surface1 rounded-2">
              {{- URL := unfinishedQuery(.QueriesC, "") }}
              <form action="{{ URL }}&name={{ .QueriesC.Query[" Name"] }}" method="post" class="row g-3">
                <div class="col-md-6">
                  <label for="wlt" class="form-label">Minimum image width</label>
                  <input type="text" class="form-control" id="wlt" name="wlt" value="{{ .QueriesC.Query[" Wlt"] }}" />
                </div>
                <div class="col-md-6">
                  <label for="wgt" class="form-label">Maximum image width</label>
                  <input type="text" class="form-control" id="wgt" name="wgt" value="{{ .QueriesC.Query[" Wgt"] }}" />
                </div>
                <div class="col-md-6">
                  <label for="hlt" class="form-label">Minimum image height</label>
                  <input type="text" class="form-control" id="hlt" name="hlt" value="{{ .QueriesC.Query[" Hlt"] }}" />
                </div>
                <div class="col-md-6">
                  <label for="hgt" class="form-label">Maximum image height</label>
                  <input type="text" class="form-control" id="hgt" name="hgt" value="{{ .QueriesC.Query[" Hgt"] }}" />
                </div>
                <div class="col-md-6">
                  <label for="scd" class="form-label">Posted after (format: yyyy-mm-dd)</label>
                  <input type="text" class="form-control" id="scd" name="scd" value="{{ .QueriesC.Query[" Scd"] }}" />
                </div>
                <div class="col-md-6">
                  <label for="ecd" class="form-label">Posted before (format: yyyy-mm-dd)</label>
                  <input type="text" class="form-control" id="ecd" name="ecd" value="{{ .QueriesC.Query[" Ecd"] }}" />
                </div>
                <div class="col-12">
                  <label for="tool" class="form-label">Tool</label>
                  <input type="text" class="form-control" id="tool" name="tool" value="{{ .QueriesC.Query[" Tool"] }}" />
                </div>
                <div class="col-12">
                  <button type="submit" class="custom-btn-secondary">Set</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
